<template>
  <div>
    <div class="header">
      <div class="form">
        <el-form :inline="true" :model="formInline" class="demo-form-inline" ref="myForm">
          <el-form-item label="产品名称" prop="name">
            <el-input v-model="formInline.name" placeholder="产品名称"></el-input>
          </el-form-item>
          <el-form-item label="添加时间" prop="date">
            <el-date-picker v-model="formInline.date" type="date" placeholder="选择日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="toSearch">查询</el-button>
            <el-button @click="reset">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="group">
        <el-button type="primary" :icon="Plus" @click="toAddProduct">
          添加商品
        </el-button>
        <el-button type="danger" :icon="Delete">批量删除</el-button>
      </div>
    </div>
    <!-- 2. 产品列表 -->
    <div class="content">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column type="selection" width="55" />
        <el-table-column prop="id" label="商品编号">
        </el-table-column>
        <el-table-column label="商品名称">
          <template #default="scope">
            <span style="color:blue;cursor: pointer;"> {{ scope.row.title }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="price" label="商品价格" width="100">
        </el-table-column>
        <el-table-column prop="category" label="商品类目" width="140">
        </el-table-column>
        <el-table-column label="添加时间">
          <template #default="scope">
            <span>{{ dayjs(scope.row.create_time).format('YYYY-MM-DD HH:mm:ss') }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="sellPoint" label="商品卖点" show-overflow-tooltip>
        </el-table-column>
        <el-table-column label="商品描述" show-overflow-tooltip prop="descs">
          <template #default="scope">
            <span>{{ removeHTMLTag(scope.row.descs) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200">
          <template #default="scope">
            <el-button size="small" type="primary" :icon="Edit"
              @click="handleEdit(scope.row,'编辑')">编辑</el-button>
            <el-button size="small" type="danger" :icon="Delete">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div class="page">
        <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize"
          layout="total, prev, pager, next, jumper" :total="total" @current-change="handleCurrentChange"
          style="diaplay:block;margin-top:12px;" />
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, reactive, ref } from "vue";
import { search, projectList } from "@/utils/api/product.js";
import { Plus, Delete, Edit } from "@element-plus/icons-vue";
import dayjs from 'dayjs'
import { removeHTMLTag } from '@/utils/common'
import { useRouter, useRoute } from 'vue-router'

const router = useRouter()
let formInline = reactive({
  name: "",
  date: "",
});
let tableData = ref([]);
let currentPage = ref(1)
let pageSize = ref(2)
const total = ref(0)

const toSearch = async () => {
  let res = await search({ search: formInline.name });
  tableData.value = res.data.result
};
const toAddProduct = () => {
  router.push('/product-category')
};
const reset = () => {
  formInline.name = ''
  formInline.date = ''
};
onMounted(() => {
  getList()
})
const getList = async (val) => {
  let res = await projectList({ page: val })
  if (res.data.status == 200) {
    tableData.value = res.data.data;
    pageSize.value = res.data.pageSize
    total.value = res.data.total
  }
}
const handleEdit = (row,title) => {
  console.log(title,'title');
  router.push({
    path: '/product/category',
    query: {
      row: JSON.stringify(row),
      title:title
    }
  })

}

const handleCurrentChange = (val) => {
  currentPage.value = val
  getList(val)

}

</script>
<style lang="scss" scoped>
.header {
  background: #fff;
  margin-bottom: 20px;
  padding: 10px;
  margin-top: 12px;

  .form {
    padding-top: 10px;
  }

}

.content {
  padding: 20px;
  background: #ffff;



}
</style>
